<!--登录界面
作者：张家豪
时间：2020/6/23
-->
<template>
  <div>
          <div>
            <el-form ref="searchForm" :model="searchForm" :inline="true" label-width="80px">
                <el-col :xl="6" :md="8" :sm="24">
                  <el-form-item label="用户" prop="title">
                    <el-input placeholder="请输入用户名" v-model="searchForm.nickname" clearable></el-input>
                  </el-form-item>
                </el-col>

                <el-col :xl="6||24" :md="8||24" :sm="24">
                  <el-form-item>
                    <div :style=" { float: 'right', overflow: 'hidden' } || {} ">
                      <el-button icon="el-icon-search" type="primary" @click="search">搜索</el-button>
                      <el-button class="ml-5" icon="el-icon-refresh-left" @click="reset">重置</el-button>
                    </div>
                  </el-form-item>
                </el-col>
              </el-form>
          </div>
          <div >
            <el-button type="primary" plain @click="en_disables(1)">批量启用</el-button>
            <el-button type="primary" plain @click="en_disables(0)">批量停用</el-button>

          </div>
          <page-table @load-table-data="loadTableData" ref="dataTable" @selection-change="selection"
                          row-key="id">
            <template slot="tb-columns">
              
              <el-table-column align="center" prop="username" label="用户名"></el-table-column>
              <el-table-column align="center" prop="nickname" label="昵称" ></el-table-column>
              <el-table-column align="center" prop="role" label="角色"></el-table-column>
              <el-table-column align="center" label="状态" :formatter="stateFormat"></el-table-column>
              <el-table-column align="center" prop="creatTime" label="创建时间" sortable></el-table-column>
          
              <el-table-column fixed="right" align="center" width="220" label="操作">
                <template slot-scope="scope">
                <el-link :underline="false" type="primary" @click="edit_password(scope.row)" v-if="scope.row.role!=='管理员'">修改密码</el-link>
                <el-divider direction="vertical"></el-divider>
                <el-link :underline="false" type="primary" @click.native="en_disable(scope.row.id,1)" v-if="scope.row.status==0">启用</el-link>
                <el-link :underline="false" type="primary" @click.native="en_disable(scope.row.id,0)" v-else-if="scope.row.status==1">停用</el-link> 
                </template>
              </el-table-column>
            
            </template>
          </page-table>

   
  <Edit_password :visible='visible' :title="title" :defaultFormData='defaultFormData' 
  v-if='visible' @close = 'close'/>
  </div>
</template>

<script>

import PageTable from '@/components/common/PageTable'
import {page,updateUseful} from '@/api/modules/user'
import {getCookie} from '@/libs/cookie'
import Edit_password from './edit-password'

export default {
    name: 'book',
    components:{PageTable,Edit_password},
   data() {

      return {
        username:'',
        searchForm:{
        title:'',
        
        },
        multipleSelection: [],
        visible: false,
        title:'',
        defaultFormDate:{},
        
      };
    },
    mounted(){
      let user = JSON.parse(getCookie("user") || '{}');
      this.username = user.nickname
    },
    methods: {
       en_disable(id,status){
     
        updateUseful({ids:id,status:status}).then(res =>{
            this.toast(res.message)
            this.$refs.dataTable.loadTableData('reload')
        }).catch(err=>{
            this.toast(err,2)
            this.$refs.dataTable.loadTableData('reload')
        })
    },
    en_disables(status){
      let ids = [];
        this.multipleSelection.forEach(item => {
            ids.push(item.id)
        })

        updateUseful({ids:ids.join(','),status:status}).then(res =>{
            this.toast(res.message)
            this.$refs.dataTable.loadTableData('reload')
        }).catch(err=>{
            this.toast(err,2)
            this.$refs.dataTable.loadTableData('reload')
        })
    },
      close(val){
        this.visible = false
        this.visible_room = false
        if(val){
          this.$refs.dataTable.loadTableData('reload')
        }
      },

      edit_password(row){
        //console.log(row)
        this.visible = true
        this.title = '修改密码'
        this.defaultFormData = row
      },

      stateFormat(row){
        if(row.status===1){
          return '可用'
        }else{
          return '不可用'
        }
      },
      loadTableData(filter,callback){
          filter = {
            ...filter,
            ...this.searchForm
          }

          page(filter).then(res => {
            this.total = res.data.total
            let tableData = {
              ...res.data,
              data: res.data.records
            }
            callback(tableData)
            
          })
        },
      selection(val){
        this.multipleSelection = val;
      },
      search(){
        this.$refs.dataTable.loadTableData('reload')
      },
      reset() {
        this.$refs.searchForm.resetFields()
        this.$refs.dataTable.loadTableData('reload')
      },
    }
};
</script>

<style scoped>
  html,body{
    padding: 0;
    margin: 0;
  }
  .el-header {
    background-color: #B3C0D1;
    color: #333;
    line-height: 60px;
  }
  
  .el-aside {
    color: #333;
  }

</style>